<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <p name="pn">hello</p>
    <p name="pn">hello</p>   
    <a href="#" id="aid" title="得到了A标签的属性">hello</a>
    <a href="#" id="aid2" title="得到了A标签的属性">aid2</a>
    <br>
    <!-- 这种写法解决了换行符存在的问题 -->
    <ul><li>1</li><li>2</li><li>3</li></ul>
    <div id="div">
        <p id="pid">hello</p>
    </div>  
    <input type="button" value="确定" onclick="getSize()">
</body>
<script>

    function getName(){
        var count  = document.getElementsByName("pn");
        alert(count.length);
        var p = count[2];
        p.innerText = 'world';
    }

    function getTagName(){
        var count  = document.getElementsByTagName("p");
        alert(count.length);
        var p = count[2];
        p.innerText = 'world';
    }

    function getAttr(){
        var anode  = document.getElementById('aid');
        var attr  = anode.getAttribute("id");
        var title  = anode.getAttribute('title');
        alert(attr);
        alert(title);
    }

    function setAttr() {
        var anode = document.getElementById("aid2");
        anode.setAttribute("title","动态设置a标签title属性");
        var attr = anode.getAttribute('title');
        alert(attr);
    }

    function getChildNode() {
        var childnode  = document.getElementsByTagName('ul')[0].childNodes;
        alert(childnode.length);        //这里是 ul标签里面每个标签后面都有一个换行符
        alert(childnode[0].nodeType);
    }

    function getParentNode(){
        var p  = document.getElementById('pid');
        var div  = p.parentNode.nodeName;       //获取父节点  在获取节点的标签名
        alert(div);

    }

    function createNode(){
        var p  = document.getElementById('pid');
        var div = p.parentNode;     //获取父节点
        var input =  document.createElement('input');   //dom 创建元素
        input.type = 'button';                  //元素属性赋值
        input.value = '新创建的按钮';
        div.appendChild(input);         //节点添加元素
        alert(input);

    }

    function addNode() {
        var div  = document.getElementById('div');
        var p  = document.getElementById('pid');
        var newnode = document.createElement('p');
        newnode.innerText =  '新动态添加的P标签';
        div.insertBefore(newnode,p);     //在div内 p标签之前 插入 新建的p标签
    }

    function removeNode() {
        var div  = document.getElementById('div');
        var  p  = div.removeChild(div.childNodes[1]);       //删除一个节点  childNodes 获取多个
    }

    function getSize() {
        var width = document.body.offsetWidth;
        var height = document.body.offsetHeight;
        alert(width);
        alert(height);
    }
</script>
</html>